import React, {useEffect, useState} from 'react';
import {Carousel} from 'antd';
import axios from 'axios';

const Middle = () => {
    const [resultName, setResultName] = useState('');
    const [resultChineseName] = useState('晚疫病');
    const [resultScore, setResultScore] = useState('');
    const [fileList, setFileList] = useState([]);
    const [access_token, setAccessToken] = useState('');
    const [imageBase64, setImageBase64] = useState('');
    const [images] = useState([
        'https://img-qn.51miz.com/preview/photo/00/01/51/47/P-1514717-13256105.jpg!/quality/90/unsharp/true/compress/true/fwfh/640x420',
        'https://img-qn.51miz.com/preview/photo/00/01/51/41/P-1514113-29810DBD.jpg!/quality/90/unsharp/true/compress/true/fwfh/640x420',
        'https://img-qn.51miz.com/preview/photo/00/01/51/25/P-1512599-CF19391A.jpg!/quality/90/unsharp/true/compress/true/fwfh/640x420',
        'https://img-qn.51miz.com/preview/photo/00/01/51/47/P-1514788-0DF4C2C8.jpg!/quality/90/unsharp/true/compress/true/fwfh/640x420'
    ]);

    useEffect(() => {
        getAccessToken();
        // eslint-disable-next-line no-use-before-define
    }, [getAccessToken]);

    const initBaiDuApi = () => {
        return axios.create({
            timeout: 3000
        });
    };

    // eslint-disable-next-line react-hooks/exhaustive-deps
    const getAccessToken = () => {
        const service = initBaiDuApi();
        service
            .get(
                '/baidu/oauth/2.0/token?grant_type=client_credentials&client_id=xsxLag513Ry9nhoa900IDQac&client_secret=BXkbiRbNCXyj2ZamEITZ0P5RmPcqT6SW'
            )
            .then(res => {
                setAccessToken(res.data.access_token);
            })
            .catch(error => {
                console.error('Error fetching access token:', error);
            });
    };

    const toUpload = data => {
        const file = data.file;
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = () => {
            const base64 = fileReader.result;
            setImageBase64(base64);
            const imageBase64 = base64.replace(/^data:image\/\w+;base64,/, '');

            const service = initBaiDuApi();
            service
                .post(
                    `/baidu/rpc/2.0/ai_custom/v1/classification/sxau20?access_token=${access_token}`,
                    {
                        image: imageBase64
                    }
                )
                .then(res => {
                    setResultName(res.data.results[0].name);
                    setResultScore(`${(Math.round(res.data.results[0].score * 10000)) / 100}%`);
                })
                .catch(error => {
                    console.error('Error uploading file and processing:', error);
                });
        };
    };

    return (
        <div className="carousel-middle">
            <Carousel autoplay>
                {images.map(item => (
                    <div key={item}>
                        <img src={item} alt="carousel-item" />
                    </div>
                ))}
            </Carousel>

            <div className="upload-img">
                <img src={imageBase64} alt="uploaded-image" />

                <div className="result-info">
                    <input addonBefore="虫害名称" value={resultName} disabled />
                    <input addonBefore="中文翻译" value={resultChineseName} disabled />
                    <input addonBefore="相似概率" value={resultScore} disabled />
                </div>
            </div>
        </div>
    );
};

export default Middle;
